<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>开通VIP - 电影网站</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="/">电影网站</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item dropdown" th:if="${session.user != null}">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                        <span th:text="${session.user.username}"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h3 class="card-title text-center mb-4">VIP会员套餐</h3>
                    <div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
                        <div class="col">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <h5 class="card-title">1个月</h5>
                                    <h2 class="card-text mb-3">¥15</h2>
                                    <button class="btn btn-primary w-100" onclick="createOrder(1)">立即开通</button>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card h-100 border-primary">
                                <div class="card-body text-center">
                                    <h5 class="card-title">3个月</h5>
                                    <h2 class="card-text mb-3">¥45</h2>
                                    <button class="btn btn-primary w-100" onclick="createOrder(3)">立即开通</button>
                                    <small class="text-muted mt-2">推荐</small>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <h5 class="card-title">12个月</h5>
                                    <h2 class="card-text mb-3">¥180</h2>
                                    <button class="btn btn-primary w-100" onclick="createOrder(12)">立即开通</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">VIP特权</div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                观看所有VIP电影
                            </li>
                            <li class="list-group-item">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                1080P高清画质
                            </li>
                            <li class="list-group-item">
                                <i class="bi bi-check-circle-fill text-success me-2"></i>
                                无广告观影体验
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script>document.forms[0].submit();</script>
<script>
    // 支付处理函数
    function payOrder(orderId) {
        $.ajax({
            url: '/order/pay',
            type: 'POST',
            data: { orderId: orderId },
            success: function(form) {
                // 处理可能的错误响应（如订单已支付）
                if (form.indexOf('alert') !== -1) {
                    $("body").append(form);
                    return;
                }

                // 正常支付表单处理
                $("body").append(form);
                $("form[action^='https://']").submit();
            },
            error: function() {
                alert('网络错误，请稍后重试');
            }
        });
    }

    // 订单创建函数
    function createOrder(months) {
        const button = event.currentTarget;
        $(button).prop("disabled", true).text("处理中...");

        $.ajax({
            url: '/order/create',
            type: 'POST',
            data: { months: months },
            dataType: 'json',
            success: function(result) {
                console.log('订单创建响应:', result);
                if (result.code === 200) {
                    payOrder(result.data); // 调用支付函数
                } else {
                    alert(result.message || '创建订单失败');
                }
            },
            error: function(xhr, status, error) {
                alert(`请求失败: ${status} - ${error}`);
                console.error('订单创建错误:', xhr.responseText);
            },
            complete: function() {
                $(button).prop("disabled", false).text("立即开通");
            }
        });
    }
</script>
</body>
</html>